<template>
  <!-- 单据提交弹出页 -->
  <div>
    <a-modal
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleSubmit"
      @cancel="handleCancel"
      okText="提交并发送到微信"
      :dialogStyle="{left:(!flag?'80px':''),top:'10px'}"
    >
      <a-form :form="form" layout="horizontal" labelAlign="left">
        <a-form-item
          label="签发日期"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-date-picker
            style="width: 100%"
            v-decorator="['qfrq', { rules: [{ required: true, message: '请填写签发日期' }] }]"

          />
        </a-form-item>
        <a-form-item
          label="结算方式"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select v-decorator="['jsfs', { initialValue: '1',rules: [{ required: true, message: '请填写结算方式' }] }]" >
            <a-select-option value="1">电汇</a-select-option>
            <a-select-option value="2">现金</a-select-option>
            <a-select-option value="3">其他</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="收款人"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['skr', { rules: [{required: true, message: '请填写收款人'}] }]" />
        </a-form-item>
        <a-form-item
          label="收款账号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['yhkh', { rules: [{required: true, message: '请填写收款账号'}] }]" />
        </a-form-item>
        <a-form-item
          label="收款银行"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['yhmc', { rules: [{required: true, message: '请填写收款银行'}] }]" />
        </a-form-item>
        <a-form-item
          label="金额"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input-number
            style="width:100%"
            :min="0"
            :max="99999"
            :precision="2"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            v-decorator="['fyhj']"

          />
        </a-form-item>
        <a-form-item
          label="事由"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-textarea allowClear v-decorator="['bxsy', { rules: [{required: true, message: '请填写事由'}] }]" />
        </a-form-item>
        <a-form-item
          label="所属销售"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select v-decorator="['ssxs', { rules: [{ required: true, message: '请选择所属销售' }] }]" >
            <a-select-option v-for="item in xsList" :key="item.key" :value="item.value">
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="备注"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-textarea v-decorator="['bz']" allowClear/>
        </a-form-item>
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
        </a-form-item>

      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { query, method } from '@/api/admin'
import moment from 'moment'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      visible: false,
      // 响应式布局
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      form: this.$form.createForm(this),
      qfrq: moment(new Date()),
      confirmLoading: false,
      flag: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
      xsList: []
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'wxid', 'token'])
  },
  props: {
    // 选择的报销单id
    ids: {
      type: Array,
      required: true
    },
    expensetype: {
      type: String,
      required: false,
      default: ''
    },
    sum: {
      type: Number,
      required: true
    }
  },
  created () {
    // const u = navigator.userAgent
    // // ios页面输入框失焦要页面重置到顶部
    // if (u.match(/\(i[^]+( U)? CPU.+Mac OS X/)) { // 判断是否是ios端
    //   let aflag = false
    //   let pageBackNormFunc
    //   document.body.addEventListener('focusin', () => {
    //     // 软键盘弹起事件
    //     aflag = true
    //     pageBackNormFunc && clearTimeout(pageBackNormFunc)
    //   })
    //   document.body.addEventListener('focusout', () => {
    //     // 软键盘关闭事件
    //     if (aflag) {
    //       pageBackNormFunc = setTimeout(function () { // // 当键盘收起的时候让页面回到原始位置
    //         window.scrollTo({ top: 0, behavior: 'smooth' })
    //       }, 200)
    //     }
    //     aflag = false
    //   })
    // }
  },
  methods: {
    begin () {
      this.visible = true
      this.getUserInfo()
    },
    /**
     * 获取人员信息
     */
    getUserInfo () {
      query('/wb/ribs/staffPage', 'GET', { 'id': this.userInfo.id }, {}).then(res => {
        this.list = res.result.data
        const user = Object.assign({}, this.list[0])
        // 表单默认带出项
        this.$nextTick(() => {
          this.form.setFieldsValue(
            {
              'qfrq': this.qfrq,
              'fyhj': this.sum,
              'skr': user.name,
              'yhkh': user.yhkh,
              'yhmc': user.khh,
              'bxsy': '',
              'bz': ''
            })
        })
      }).catch(() => {
        this.$notification['info']({
          message: '获取人员信息失败',
          duration: 4
        })
      })
      query('/wb/ribs/getXS', 'GET', { 'deptName': '业务拓展部' }, {}).then(res => {
        this.xsList = res.result.data
      }).catch(() => {

      })
    },
    /**
     * 取消
     */
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    /**
     * 提交
     */
    handleSubmit () {
      // eslint-disable-next-line no-irregular-whitespace
      // 防止用户反复点击按钮 向后台多次发送请求
      // eslint-disable-next-line no-irregular-whitespace
      if (this.confirmLoading) {
        return
      }
      this.form.validateFields((err, values) => {
        if (!err) {
          this.save(values)
        }
      })
    },
    /**
     * 请求后台-保存
     */
    save (values) {
      if (this.$route.query.bxdh !== undefined && this.$route.query.bxdh !== null && this.$route.query.bxdh !== '') {
        values.bxdh = this.$route.query.bxdh
      }
      let url = ''
      if (this.expensetype === 'evection') {
        url = '/wb/ribs/commitClf'
        values.bxlx = '1'
      } else if (this.expensetype === 'traffic') {
        url = '/wb/ribs/commitJtf'
        values.bxlx = '2'
      } else if (this.expensetype === 'meal') {
        url = '/wb/ribs/commitCyf'
        values.bxlx = '3'
      } else {
        url = '/wb/ribs/commitQt'
        values.bxlx = '5'
      }
      values.ids = this.ids.join(',')
      values.staffId = this.userInfo.id
      // 转时间戳类型
      values.qfrq = moment(values.qfrq, 'YYYY-MM-DD HH:mm:ss').valueOf()
      const param = {}
      param.ribsVo = values
      param.wechatInfo = { 'accessToken': this.token.accessToken, 'wxUserId': this.wxid }
      param.staffInfo = this.userInfo
      const actionParam = {// 请求参数
        'url': url,
        'action': 'post',
        'parameter': {},
        'data': Object.assign({}, param),
        'message': '提交成功'
      }
      this.confirmLoading = true
      method(actionParam).then(res => {
        this.form.resetFields()
        this.visible = false
        this.confirmLoading = false
        if (this.$route.query.bxdh !== undefined && this.$route.query.bxdh !== null) {
          this.$emit('backTo')
          this.$store.commit('SET_HISTORY_REFRESH_FLAG', true)
        } else {
          this.$emit('refresh', this.expensetype)
        }
      })
    }
  }
}
</script>
